<template>
  <div class="blank" style="padding-top: 75px;"></div>
  <div id="content" class="site-content" style="height: 697.75px;">
    <div id="main">
      <header class="page-header"><h1 class="cat-title">时光轴</h1> <span class="cat-des"><p>TimeLine</p> </span></header>
      <div id="main-part">
        <article class="art">
          <div class="art-main">
            <div class="art-content">
              <a-timeline mode="alternate">
                <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
                <a-timeline-item color="green">Solve initial network problems 2015-09-01</a-timeline-item>
                <a-timeline-item>
                  <template #dot><ClockCircleOutlined style="font-size: 16px" /></template>
                  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                  laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
                  beatae vitae dicta sunt explicabo.
                </a-timeline-item>
                <a-timeline-item color="red">Network problems being solved 2015-09-01</a-timeline-item>
                <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
                <a-timeline-item>
                  <template #dot><ClockCircleOutlined style="font-size: 16px" /></template>
                  Technical testing 2015-09-01
                </a-timeline-item>
              </a-timeline>
            </div>
          </div>
        </article>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { ClockCircleOutlined } from '@ant-design/icons-vue';
import { Timeline } from 'ant-design-vue';
import { defineComponent } from 'vue';
export default defineComponent({
  components: {
    ClockCircleOutlined,
    Timeline,
  },
});
</script>

<style scoped>

</style>